<!-- 我的视图 -->

<template>
  <div
    ref="view"
    v-bind="viewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground cover @loaded="toLoaded">
      <ViewArea v-for="item in areaList" :key="item.id" :obj="item" />
      <ViewPoint v-for="item in gatherList" :key="item.id" :obj="item" />
    </ViewBackground>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'
import UTIL from './UTIL'

// ============================== 导出组件 ============================== //

export default CORE.extend(MapView, {
  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    CORE.mixBase(),
    CORE.mixWeb('map', 'map_'),
    CORE.mixInfo('map', 'map_'),
  ],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...MapView.computed,

    /**
     * 聚合间隙的宽度百分比
     */
    gapWP() {
      return CORE.div(2600, this.scaleW)
    },

    /**
     * 聚合间隙的高度百分比
     */
    gapHP() {
      return CORE.div(3900, this.scaleH)
    },

    /**
     * 视图属性
     */
    viewProps() {
      const { inTrans } = this
      const name = 'SecureOverview-MapView'
      const trans = inTrans ? ` ${name}-inTrans` : ''
      return { class: `flexCC ${name}${trans}` }
    },

    /**
     * 聚合列表
     */
    gatherList() {
      const { map_list, gapWP, gapHP } = this
      return UTIL.getGatherList(map_list, gapWP, gapHP, this.scale === 1)
    },

    /**
     * 多边形区域列表
     */
    areaList() {
      const { areaId } = this.map_infoParam
      return CORE.REGION.MAP[areaId].children
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    ...MapView.methods,

    /**
     * 鼠标按下
     */
    mouseDown({ srcElement, button, clientX, clientY }) {
      if (this.checkNoMove(srcElement)) return

      button === 0 && this.transStart(clientX, clientY)
      // button === 2 && this.rotateStart(clientX, clientY)

      this.MAP.fold = true
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
